"use client";
import {
  Avatar,
  Button,
  Card,
  Col,
  Form,
  Input,
  Menu,
  message,
  Modal,
  Pagination,
  Progress,
  Row,
  Space,
  Tooltip,
} from "antd";
import Meta from "antd/es/card/Meta";
import Paragraph from "antd/es/typography/Paragraph";
import Title from "antd/es/typography/Title";
import { AppDispatch, RootState } from "@/stores";
import React, { useEffect, useState } from "react";
import "./index.css";
import CalendarChart from "@/app/user/center/components/CalendarChart";
import QuestionList from "@/components/QuestionList";
import SignQuestionList from "@/components/SignQuestionList";
import { addSignIn, checkSign, SignPoints } from "@/api/userSignInController";
import { getCollectionListPost, getSignListPost } from "@/api/WishController";
import { listMockInterviewVoByPageUsingPost } from "@/api/mockInterviewController";
import Upload from "antd/es/upload/Upload";
import { uploadFileUsingPost } from "@/api/fileController";
import { updateMyUserUsingPost } from "@/api/userController";
import { useDispatch, useSelector } from "react-redux";
import { setLoginUser } from "@/stores/loginUser";
import Sider from "antd/es/layout/Sider";
import { FireOutlined } from "@ant-design/icons";
import { getQuestionHotUserUsingPost } from "@/api/questionController";
import Link from "next/link";
import dayjs from "dayjs";
import { useRouter } from "next/navigation";

export default function UserCenterPage() {
  const loginUser = useSelector((state: RootState) => state.loginUser);
  const user = loginUser;
  // 状态管理
  const dispatch = useDispatch<AppDispatch>();
  const [form] = Form.useForm();
  const [tempAvatar, setTempAvatar] = useState(loginUser.userAvatar);
  const [uploadLoading, setUploadLoading] = useState(false);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [hasSignedToday, setHasSignedToday] = useState(false);
  const [isSigning, setIsSigning] = useState(false);
  const [hotQuestions, setHotQuestions] = useState<API.QuestionVO[]>([]);
  const [loadingHotQuestions, setLoadingHotQuestions] = useState(false);
  const [hotQuestionsError, setHotQuestionsError] = useState<string | null>(
    null,
  );
  const [activeTabKey, setActiveTabKey] = useState<
    "record" | "wish" | "interview"
  >("record");
  const [tabData, setTabData] = useState({
    record: {
      list: [] as any[],
      pagination: { current: 1, pageSize: 5 },
      total: 0,
    },
    wish: {
      list: [] as any[],
      pagination: { current: 1, pageSize: 5 },
      total: 0,
    },
    interview: {
      list: [] as any[],
      pagination: { current: 1, pageSize: 2 },
      total: 0,
    },
  });
  const [signPointsVO, setSignPointsVO] = useState<API.SignPointsVO>();
  const router = useRouter();

  //获取用户签到信息
  const getSignPoints = async () => {
    try {
      const response = await SignPoints();
      // @ts-ignore
      setSignPointsVO(response.data);
    } catch (error) {}
  };

  // 检查签到状态
  const checkSignStatus = async () => {
    try {
      const response = await checkSign();

      // @ts-ignore
      setHasSignedToday(response.data || false);
    } catch (error) {
      message.error("获取签到状态失败");
    }
  };

  // 处理签到
  const handleSignIn = async () => {
    if (hasSignedToday) return;
    setIsSigning(true);
    try {
      const response = await addSignIn();
      if (response.data) {
        message.success("签到成功！");
        setHasSignedToday(true);
        // 可以在这里更新用户积分显示等
      } else {
        // @ts-ignore
        message.error(response.message || "签到失败");
      }
    } catch (error) {
      message.error("签到请求失败");
    } finally {
      setIsSigning(false);
    }
  };

  // 获取当前Tab数据
  const fetchData = async () => {
    try {
      const currentTab = tabData[activeTabKey];
      const params = {
        pageSize: currentTab.pagination.pageSize,
        current: currentTab.pagination.current,
        sortField: "createTime",
        sortOrder: "desc",
      };

      // @ts-ignore
      let res;
      if (activeTabKey === "record") {
        // @ts-ignore
        res = await getSignListPost(params);
      } else if (activeTabKey === "wish") {
        // @ts-ignore
        res = await getCollectionListPost(params);
      } else if (activeTabKey === "interview") {
        // @ts-ignore
        res = await listMockInterviewVoByPageUsingPost(params);
      }

      setTabData((prev) => ({
        ...prev,
        [activeTabKey]: {
          ...prev[activeTabKey],
          // @ts-ignore
          list: res.data?.records ?? [],
          // @ts-ignore
          total: res.data?.total ?? 0,
        },
      }));
    } catch (e) {
      message.error(
        `获取${
          activeTabKey === "record"
            ? "刷题记录"
            : activeTabKey === "wish"
              ? "收藏列表"
              : "面试记录"
        }失败`,
      );
    }
  };

  // 切换Tab
  const handleTabChange = (key: string) => {
    setActiveTabKey(key as "record" | "wish" | "interview");
    // 重置分頁到第一頁
    setTabData((prev) => ({
      ...prev,
      [key]: {
        ...prev[key as "record" | "wish" | "interview"],
        pagination: {
          current: 1,
          pageSize:
            prev[key as "record" | "wish" | "interview"].pagination.pageSize,
        },
      },
    }));
  };

  // 分页变化
  const handlePaginationChange = (page: number, pageSize: number) => {
    setTabData((prev) => ({
      ...prev,
      [activeTabKey]: {
        ...prev[activeTabKey],
        pagination: { current: page, pageSize },
      },
    }));
  };

  // @ts-ignore
  const LevelProgress = ({ NowPoints, nextLevelPoints }) => {
    // 判斷是否為最高等級
    const isMaxLevel = !nextLevelPoints;

    // 計算百分比（避免除以零）
    const progressPercent = isMaxLevel
      ? 100
      : nextLevelPoints > 0
        ? Math.min((signPointsVO?.points / nextLevelPoints) * 100, 100)
        : 0;

    return (
      <div style={{ marginTop: 10 }}>
        <Tooltip
          title={
            isMaxLevel
              ? `当前积分: ${signPointsVO?.points || 0}（已达最高等级）`
              : `当前积分: ${signPointsVO?.points || 0}/${nextLevelPoints}`
          }
        >
          <Progress
            percent={progressPercent}
            showInfo={false}
            strokeColor={{
              "0%": "#000",
              "100%": "#fff",
            }}
            trailColor="#f0f0f0"
          />
        </Tooltip>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            fontSize: 12,
            color: "#666",
            marginTop: 4,
          }}
        >
          <div style={{ marginBottom: "5px" }}>
            {isMaxLevel
              ? "已经到达系统最高等级"
              : `下一等級还需 ${nextLevelPoints - (signPointsVO?.points || 0)} 积分`}
          </div>
        </div>
      </div>
    );
  };
  // 获取猜你想刷的热门题目
  const fetchHotQuestions = async () => {
    setLoadingHotQuestions(true);
    try {
      const res = await getQuestionHotUserUsingPost();
      // @ts-ignore - 根据接口实际返回结构调整
      console.log(res.data);
      // @ts-ignore
      setHotQuestions(res.data || []);
      setHotQuestionsError(null);
    } catch (e) {
      console.error("获取猜你想刷题目失败:", e);
      setHotQuestionsError("加载热门题目失败，请稍后重试");
      message.error("加载热门题目失败");
    } finally {
      setLoadingHotQuestions(false);
    }
  };
  // 初始化数据
  useEffect(() => {
    checkSignStatus();
    getSignPoints();
    fetchData();
    fetchHotQuestions();
  }, [activeTabKey, tabData[activeTabKey].pagination]);

  // 显示编辑对话框
  const showUserInfo = () => {
    setTempAvatar(user.userAvatar);
    form.setFieldsValue({
      userName: user.userName,
      userProfile: user.userProfile,
      userAvatar: user.userAvatar,
      phoneNumber: user.phoneNumber,
      email: user.email,
      grade: user.grade,
      workExperience: user.workExperience,
      expertiseDirection: user.expertiseDirection,
    });
    setEditModalVisible(true);
  };

  // 提交编辑表单
  const handleEditSubmit = async () => {
    const hide = message.loading("正在更新");

    try {
      const values = await form.validateFields();
      const userInfo = {
        userName: values.userName,
        userProfile: values.userProfile,
        userAvatar: tempAvatar,
        phoneNumber: values.phoneNumber,
        email: values.email,
        grade: values.grade,
        workExperience: values.workExperience,
        expertiseDirection: values.expertiseDirection,
      };

      const res = await updateMyUserUsingPost(userInfo);
      const userInfos = {
        ...userInfo,
        userRole: user.userRole,
      };
      dispatch(setLoginUser(userInfos));
      if (res) {
        hide();
        setEditModalVisible(false);
        message.success("更新成功");
      } else {
        // @ts-ignore
        message.error(res.data);
        setEditModalVisible(false);
      }
    } catch (error) {
      hide();
      setEditModalVisible(false);
    }
  };
  // 文件上传前验证
  const beforeAvatarUpload = (file: File) => {
    const isImage = file.type.startsWith("image/");
    if (!isImage) {
      message.error("只能上传图片文件!");
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error("图片大小不能超过2MB!");
      return false;
    }
    return true;
  };
  // 自定义上传处理
  const handleAvatarUpload = async ({ file, onSuccess, onError }: any) => {
    setUploadLoading(true);
    try {
      const res = await uploadFileUsingPost(
        { biz: "user_avatar" }, // params 参数
        {}, // body 参数
        file as File, // file 参数
      );
      // @ts-ignore
      setTempAvatar(res.data); // 更新预览
      form.setFieldsValue({ userAvatar: res.data }); // 更新表单值
    } catch (error) {
      // @ts-ignore
      message.error(error.message);
      onError(error);
    } finally {
      setUploadLoading(false);
    }
  };
  const questionMenuItemList = hotQuestions.map((q) => ({
    label: (
      <Link href={`/question/${q.id}`} style={{ color: "#333" }}>
        {q.title}
      </Link>
    ),
    key: q.id,
    icon: <FireOutlined style={{ color: "#ff7b00" }} />, // 添加火苗图标
  }));

  // 獲取狀態顯示信息
  const getStatusInfo = (status: number | undefined) => {
    switch (status ?? -1) {
      case 0:
        return {
          text: "待开始",
          color: "#faad14",
          background: "#fff7e6",
        };
      case 1:
        return {
          text: "进行中",
          color: "#1890ff",
          background: "#e6f7ff",
        };
      case 2:
        return {
          text: "已完成",
          color: "#52c41a",
          background: "#f6ffed",
        };
      default:
        return {
          text: "未知",
          color: "#999999",
          background: "#f5f5f5",
        };
    }
  };

  // 處理面試跳轉
  const handleInterviewClick = (interview: API.MockInterview) => {
    if ((interview.status === 0 || interview.status === 1) && interview.id) {
      router.push(`/mockInterview/chat/${interview.id}`);
    }
  };

  return (
    <div id="userCenterPage" className="max-width-content">
      <Modal
        title="修改资料"
        open={editModalVisible}
        onOk={handleEditSubmit}
        onCancel={() => setEditModalVisible(false)}
        confirmLoading={uploadLoading}
      >
        <div style={{ margin: 20 }}>
          <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
            {/* 头像上传部分 */}
            <Form.Item label="头像">
              <Upload
                name="avatar"
                showUploadList={false}
                beforeUpload={beforeAvatarUpload}
                customRequest={handleAvatarUpload}
                accept="image/*"
              >
                <div style={{ position: "relative", cursor: "pointer" }}>
                  <Avatar
                    src={tempAvatar}
                    size={100}
                    style={{
                      border: "2px solid #f0f0f0",
                      transition: "opacity 0.3s",
                    }}
                  />
                  <div
                    style={{
                      position: "absolute",
                      bottom: 0,
                      left: "50%",
                      transform: "translateX(-50%)",
                      backgroundColor: "rgba(0,0,0,0.6)",
                      color: "white",
                      padding: "2px 8px",
                      borderRadius: 4,
                      fontSize: 12,
                      whiteSpace: "nowrap",
                    }}
                  >
                    点击修改
                  </div>
                </div>
              </Upload>
            </Form.Item>

            {/* 其他表单项 */}
            <Form.Item
              label="用户名"
              name="userName"
              rules={[{ required: true, message: "请输入用户名" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item label="个人简介" name="userProfile">
              <Input.TextArea rows={4} />
            </Form.Item>
            <Form.Item
              label="邮箱"
              name="email"
              rules={[{ required: true, message: "请输入邮箱" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="年级"
              name="grade"
              rules={[{ required: true, message: "请输入年级" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="工作经验"
              name="workExperience"
              rules={[{ required: true, message: "请输入工作经验" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="擅长方向"
              name="expertiseDirection"
              rules={[{ required: true, message: "请输入擅长方向" }]}
            >
              <Input />
            </Form.Item>
          </Form>
        </div>
      </Modal>
      <Row gutter={[16, 16]}>
        <Col xs={24} md={7}>
          <Card
            style={{ textAlign: "left" }}
            title={"个人信息"}
            extra={
              <Button type="link" onClick={showUserInfo}>
                编辑
              </Button>
            }
          >
            <div style={{ textAlign: "center" }}>
              <Avatar src={user.userAvatar} size={128} />
              <div style={{ marginBottom: 16 }} />
              <Meta
                title={
                  <Title level={4} style={{ marginBottom: 0 }}>
                    {user.userName}
                  </Title>
                }
                description={
                  <>
                    <Paragraph type="secondary">
                      简介：{user.userProfile}
                    </Paragraph>
                  </>
                }
              />
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  marginTop: "5px",
                }}
              >
                <div
                  style={{
                    backgroundColor: "#fada00",
                    color: "#fff",
                    fontWeight: "bold",
                    fontSize: "15px",
                    width: "50px",
                    borderRadius: " 12px 0 8px 0",
                  }}
                >
                  LV {signPointsVO?.levels}
                </div>
              </div>
            </div>
          </Card>
          <div style={{ marginTop: 15 }}>
            <Sider
              width={335}
              theme="light"
              style={{ padding: "24px 0", marginTop: 15 }}
            >
              <Title level={4} style={{ marginLeft: 10 }}>
                猜你想刷
                {/*<Space*/}
                {/*  style={{*/}
                {/*    color: "#ff7b00",*/}
                {/*    fontWeight: 600,*/}
                {/*    fontSize: "14px",*/}
                {/*  }}*/}
                {/*>*/}
                {/*  <FireOutlined style={{ fontSize: "16px" }} />*/}
                {/*  <span>HOT</span>*/}
                {/*</Space>*/}
              </Title>

              {loadingHotQuestions ? (
                <div style={{ padding: 10, textAlign: "center" }}>
                  加载中...
                </div>
              ) : hotQuestionsError ? (
                <div style={{ padding: 10, color: "red" }}>
                  {hotQuestionsError}
                </div>
              ) : (
                <Menu items={questionMenuItemList} />
              )}
            </Sider>
          </div>
        </Col>
        <Col xs={24} md={16}>
          <Card>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <div
                style={{
                  height: "156px",
                  width: "80%",
                  background: "#f1cb3c",
                  borderRadius: "12px",
                }}
              >
                <div>
                  <div
                    style={{
                      background: "#efc01a",
                      textAlign: "center",
                      width: "72px",
                      height: "23px",
                      borderRadius: " 12px 0 8px 0",
                      fontSize: "13px",
                      fontWeight: 500,
                      color: "white",
                    }}
                  >
                    当前等级
                  </div>
                  <div
                    style={{
                      paddingLeft: "20px",
                      paddingRight: "8px",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                      }}
                    >
                      <div
                        style={{
                          marginTop: 20,
                          display: "flex",
                          justifyContent: "space-between",
                          flexDirection: "column",
                        }}
                      >
                        <div
                          style={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                          }}
                        >
                          <div style={{ fontSize: "22px", fontWeight: "bold" }}>
                            {signPointsVO?.levelName}
                          </div>
                          <div style={{ margin: "0 20px" }}>
                            专业年级：{user.grade}
                          </div>
                          <div>工作经验：{user.workExperience}</div>
                        </div>
                        <div style={{ display: "flex" }}>
                          <p style={{ marginLeft: 5 }}>
                            LV {signPointsVO?.levels}
                          </p>
                          <p style={{ margin: "0 20px" }}>
                            排名 {signPointsVO?.levelRanks}
                          </p>
                          <p>经验 {signPointsVO?.points}</p>
                          <p
                            style={{
                              margin: "0 20px",
                              color: "#Ff7800",
                              fontWeight: "bold",
                            }}
                          >
                            擅长方向:{user.expertiseDirection}
                          </p>
                        </div>
                      </div>
                      <div
                        style={{
                          width: "70px",
                          height: "70px",
                          cursor: "pointer",
                          marginRight: "40px",
                          background:
                            "linear-gradient(-45deg, rgb(254, 244, 180), rgb(247, 215, 127) 50%, rgb(244, 193, 56) 100%)",
                          backgroundSize: "cover",
                          backgroundPosition: "center",
                          backgroundRepeat: "no-repeat",
                          backgroundImage:
                            "url('https://quit-1308074635.cos.ap-guangzhou.myqcloud.com/user_avatar/1/vzva8sng-123.png')",
                          overflow: "hidden", // 确保放大时不会超出容器
                          transition:
                            "transform 0.3s ease, background-size 0.3s ease", // 添加过渡效果
                        }}
                        className="hover-scale"
                      />
                    </div>
                    <div style={{ marginTop: "10px" }}>
                      <LevelProgress
                        NowPoints={{ points: signPointsVO?.points }}
                        nextLevelPoints={signPointsVO?.nextLevelPoints}
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                style={{
                  height: "156px",
                  width: "20%",
                  textAlign: "center",
                  background:
                    "linear-gradient(-45deg, rgb(254, 244, 180), rgb(247, 215, 127) 50%, rgb(244, 193, 56) 100%)",
                  borderRadius: "4px",
                  marginLeft: "10px",
                  display: "flex",
                  padding: "12px",
                  flexDirection: "column",
                  justifyContent: "flex-end",
                  alignItems: "center",
                }}
              >
                <div
                  style={{
                    width: "133px",
                    height: "125px",
                    cursor: "pointer",
                    background:
                      "linear-gradient(-45deg, rgb(254, 244, 180), rgb(247, 215, 127) 50%, rgb(244, 193, 56) 100%)",
                    backgroundSize: "cover",
                    backgroundPosition: "center",
                    backgroundRepeat: "no-repeat",
                    backgroundImage:
                      "url('https://quit-1308074635.cos.ap-guangzhou.myqcloud.com/user_avatar/1/vzva8sng-123.png')",
                    overflow: "hidden", // 确保放大时不会超出容器
                    transition:
                      "transform 0.3s ease, background-size 0.3s ease", // 添加过渡效果
                  }}
                  className="hover-scale"
                />
                <Button
                  type="primary"
                  style={{
                    width: "60%",
                    height: "32px",
                    padding: "4px 15px",
                    marginTop: "5px",
                    borderRadius: "6px",
                    backgroundColor: hasSignedToday ? "#d9d9d9" : "#f6d16a",
                    border: "none",
                    color: "#fff",
                  }}
                  onClick={handleSignIn}
                  loading={isSigning}
                  disabled={hasSignedToday}
                  className={"hover-scale"}
                >
                  {hasSignedToday ? "今日已签到" : "立即签到"}
                </Button>
              </div>
            </div>
            <div style={{ marginTop: "15px" }}>
              <CalendarChart />
            </div>
          </Card>
          <Card
            style={{ marginTop: 16 }}
            tabList={[
              { key: "record", label: "刷题记录" },
              { key: "wish", label: "题目收藏" },
              { key: "interview", label: "面试记录" },
            ]}
            activeTabKey={activeTabKey}
            onTabChange={handleTabChange}
          >
            {activeTabKey === "record" && (
              <SignQuestionList questionList={tabData.record.list} />
            )}
            {activeTabKey === "wish" && (
              <QuestionList questionList={tabData.wish.list} />
            )}
            {activeTabKey === "interview" && (
              <div>
                {tabData.interview.list.map((interview: API.MockInterview) => {
                  const messages = JSON.parse(interview.messages || "[]");
                  const lastMessage = messages[messages.length - 1];
                  const isEnded =
                    lastMessage?.message?.includes("【面试结束】");

                  // 提取面試結束時的建議
                  const getInterviewSummary = (message: string) => {
                    if (!message?.includes("【面试结束】")) return null;
                    const parts = message.split("【面试结束】");
                    if (parts.length > 1) {
                      return parts[1].trim();
                    }
                    return null;
                  };

                  const summary = getInterviewSummary(
                    lastMessage?.message || "",
                  );

                  // 過濾掉系統提示信息
                  const filteredMessages = messages.filter((msg: any) => {
                    // 過濾掉 role 為 system 的消息
                    if (msg.role === "system") return false;
                    // 過濾掉 role 為 assistant 且消息內容包含特定提示文本的消息
                    if (
                      msg.role === "assistant" &&
                      msg.message.includes("你是一位严厉的程序员面试官")
                    )
                      return false;
                    // 過濾掉 role 為 user 且消息內容為"开始"的消息
                    if (msg.role === "user" && msg.message.trim() === "开始")
                      return false;
                    return true;
                  });

                  return (
                    <Card
                      key={interview.id}
                      style={{ marginBottom: 16 }}
                      title={`${interview.jobPosition} - ${interview.difficulty}`}
                      extra={
                        <Space>
                          <span>工作经验：{interview.workExperience}</span>
                          <span
                            style={{
                              padding: "4px 8px",
                              borderRadius: "4px",
                              cursor:
                                interview.status === 0 || interview.status === 1
                                  ? "pointer"
                                  : "default",
                              ...getStatusInfo(interview.status),
                            }}
                            onClick={() => handleInterviewClick(interview)}
                          >
                            {getStatusInfo(interview.status).text}
                          </span>
                        </Space>
                      }
                    >
                      <div>
                        <p>
                          创建时间：
                          {dayjs(interview.createTime).format("YYYY-MM-DD")}
                        </p>
                        <div style={{ marginTop: 16 }}>
                          <div style={{ fontWeight: "bold", marginBottom: 8 }}>
                            面试对话：
                          </div>
                          <div style={{ maxHeight: 300, overflowY: "auto" }}>
                            {filteredMessages.map((msg: any, index: number) => (
                              <div
                                key={index}
                                style={{
                                  display: "flex",
                                  justifyContent:
                                    msg.role === "assistant"
                                      ? "flex-start"
                                      : "flex-end",
                                  marginBottom: 8,
                                }}
                              >
                                <div
                                  style={{
                                    maxWidth: "80%",
                                    padding: 8,
                                    backgroundColor:
                                      msg.role === "assistant"
                                        ? "#f5f5f5"
                                        : "#e6f7ff",
                                    borderRadius: 8,
                                    position: "relative",
                                  }}
                                >
                                  <div
                                    style={{
                                      fontWeight: "bold",
                                      marginBottom: 4,
                                      color:
                                        msg.role === "assistant"
                                          ? "#1890ff"
                                          : "#52c41a",
                                    }}
                                  >
                                    {msg.role === "assistant"
                                      ? "面试官"
                                      : "面试者"}
                                  </div>
                                  <div style={{ whiteSpace: "pre-wrap" }}>
                                    {msg.message}
                                  </div>
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>
                        {isEnded && summary && (
                          <div
                            style={{
                              marginTop: 16,
                              padding: 16,
                              backgroundColor: "#fff2e8",
                              borderRadius: 8,
                              border: "1px solid #ffccc7",
                            }}
                          >
                            <div
                              style={{
                                fontWeight: "bold",
                                color: "#ff4d4f",
                                marginBottom: 8,
                              }}
                            >
                              面试总结
                            </div>
                            <div style={{ whiteSpace: "pre-wrap" }}>
                              {summary}
                            </div>
                          </div>
                        )}
                      </div>
                    </Card>
                  );
                })}
              </div>
            )}
            <div
              style={{
                marginTop: 16,
                display: "flex",
                justifyContent: "center",
              }}
            >
              <Pagination
                current={tabData[activeTabKey].pagination.current}
                pageSize={tabData[activeTabKey].pagination.pageSize}
                total={tabData[activeTabKey].total}
                onChange={handlePaginationChange}
                showTotal={(total) => `共 ${total} 条`}
              />
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
